
import $constant from '@/utils/open/constant'
import { ssrCompile } from 'vue-template-compiler'
export default {
  initEchart (type, { echarts, countData, curDate }) {
    // return
    console.log('---initEchart', curDate)
    if (!countData) return
    type = type || 'line'
    if (type === 'line') {
      this.initLineEchart({ echarts, countData, curDate })
    } else {
      this.initPieEchart({ echarts, countData, curDate })
    }
  },
  // 初始化饼图
  initPieEchart ({ data, echarts, domId, countData, curDate }) {
    var pieChartDom = echarts.init(document.getElementById(domId))
    const option = {
      color: ['#60a6f6', '#f56c6c'],
      // title: {
      //   text: 'Referer of a Website',
      //   subtext: 'Fake Data',
      //   left: 'center'
      // },
      tooltip: {
        trigger: 'item'
      },
      series: [
        {
          // name: 'Access From',
          type: 'pie',
          // radius: ['40%', '70%'],
          // avoidLabelOverlap: false,
          // label: {
          //   show: false,
          //   position: 'center'
          // },
          // emphasis: {
          //   label: {
          //     show: true,
          //     fontSize: '14',
          //     fontWeight: 'bold'
          //   }
          // },
          // labelLine: {
          //   show: false
          // },

          radius: ['60%', '100%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '10',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },

          data: data
          // emphasis: {
          //   itemStyle: {
          //     shadowBlur: 10,
          //     shadowOffsetX: 0,
          //     shadowColor: 'rgba(0, 0, 0, 0.5)'
          //   }
          // }
        }
      ]
    }

    option && pieChartDom.setOption(option)
    return { echartDom: pieChartDom }
  },

  /**
   * 按题目数，分析错题情况
   * 条形图+折线图：
   * x轴是题目数， 条形图：本次做题总人数 ， 折线图：错题人数
   */
  // 初始化条形统计图
  initLineEchart ({ echarts, domId, countData, curDate }) {
    const lineChartDom = echarts.init(document.getElementById(domId))
    // debugger
    const xAxisData = []

    const errorData = {
      name: '答错人数',
      type: 'line',
      data: [],
      itemStyle: { normal: { label: { show: true } } }
    }
    const allData = {
      name: '答题人数',
      type: 'bar',
      data: []
    }

    // x轴数据
    const testArr = $constant.chapterAnswerData[curDate] // 题目数据
    testArr.forEach((o, i) => {
      xAxisData.push('第' + (i + 1) + '题')
    })

    // y轴数据
    const curSubject = $constant.subjectData[curDate]
    // debugger
    xAxisData.forEach((o, i) => {
      const exam = curSubject[i]
      // debugger
      errorData.data.push(exam.errNum)
      allData.data.push(exam.allNum)
    })

    // 指定图表的配置项和数据
    var option = {
      color: $constant.echartColors,
      title: {
        text: '错题情况【' + curDate + '】',
        textStyle: {
          // color: '#fff',
        }
      },
      grid: {
        left: '10%',
        top: '10%',
        right: '0%',
        bottom: '10%',
        textStyle: {
          // color: '#fff',
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        formatter (params) {
          let str = ''
          params.forEach((seriesObj, i) => {
            const dataIndex = seriesObj.dataIndex
            const t = testArr[dataIndex]
            if (!str) {
              str = '<span class="fs-16">' + seriesObj.axisValue + '</span> <span class="fs-12">' + t.label + '</span><br/>'
            }
            // debugger
            const iconHtml = '<span class="echart-tooltip-icon" style="background: ' + seriesObj.color + ';"></span>'
            str += '<div class="echart-tooltip-line">' + iconHtml + ' ' + seriesObj.seriesName + ' ' + seriesObj.value + '</div>'
          })
          return str
        }
      },
      legend: {
        bottom: 0,
        data: ['答题人数', '答错人数'],
        textStyle: {
          // color: '#fff',
        }
      },
      xAxis: {
        data: xAxisData
      },
      yAxis: {
      },
      series: [
        allData, errorData
      ]
    }

    console.log('option', option)

    // 使用刚指定的配置项和数据显示图表。
    lineChartDom.setOption(option)

    return { echartDom: lineChartDom }
  },


  /**
   * 按题目数，分析错题情况
   * 条形图+折线图：
   * x轴是题目数， 条形图：本次做题总人数 ， 折线图：错题人数
   */
  // 初始化条形统计图
  initLineEchart1111 ({ echarts, domId, countData, curDate }) {
    const lineChartDom = echarts.init(document.getElementById(domId))
    // debugger
    const xAxisData = []

    // 统计10道题，4个答案的选择数量
    const answerNum = 4 // 题目答案数
    const answerTypeName = ['A', 'B', 'C', 'D']
    const answerTypeArr = []
    const curSubjectData = $constant.subjectData[curDate]
    const typeObj = {} // 四个答案选项的echart数据（统计10道题，4个答案的选择数量）
    const optionsStr = '选项'
    // debugger
    for (let i = 0; i < answerNum; i++) {
      const typeName = 'type' + answerTypeName[i]
      typeObj[typeName] = {
        name: answerTypeName[i] + optionsStr,
        type: 'bar',
        stack: 'Ad',
        emphasis: {
          focus: 'series'
        },
        data: []
      }
    }
    // debugger
    for (const index in curSubjectData) {
      const subjectItem = curSubjectData[index]
      // debugger
      answerTypeName.forEach((o, i) => {
        const typeName = 'type' + answerTypeName[i]
        const subjectItemNum = subjectItem[typeName]
        typeObj[typeName].data.push(subjectItemNum)
      })
      // debugger
    }
    for (const tyIndex in typeObj) {
      const typeItem = typeObj[tyIndex]
      answerTypeArr.push(typeItem)
    }

    // debugger
    // 答错人数
    const errorData = {
      name: '答错人数',
      type: 'line',
      data: [],
      itemStyle: { normal: { label: { show: true } } }
    }

    // 答题人数
    const answerData = {
      name: '答题人数',
      type: 'bar',
      data: []
    }

    // x轴数据
    const testArr = $constant.chapterAnswerData[curDate] // 题目数据
    testArr.forEach((o, i) => {
      xAxisData.push('第' + (i + 1) + '题')
    })

    // y轴数据
    const curSubject = $constant.subjectData[curDate]
    // debugger
    xAxisData.forEach((o, i) => {
      const exam = curSubject[i]
      // debugger
      errorData.data.push(exam.errNum)
      answerData.data.push(exam.allNum)
    })
    let allAnswerNum = answerData.data[0]

    const curRight = $constant.rightAswerObj[curDate]
    // debugger
    // 指定图表的配置项和数据
    var option = {
      color: $constant.echartColors,
      title: {
        text: '错题情况【' + curDate + '】',
        textStyle: {
          // color: '#fff',
        }
      },
      grid: {
        left: '10%',
        top: '10%',
        right: '0%',
        bottom: '10%',
        textStyle: {
          // color: '#fff',
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        formatter (params) {
          let str = ''
          params.forEach((seriesObj, i) => {
            const dataIndex = seriesObj.dataIndex
            const t = testArr[dataIndex]
            let rightA = ''
            if (seriesObj.componentSubType === 'bar') {// 控制柱状图
              rightA = curRight[dataIndex] + optionsStr
              // debugger
            } else {
              // debugger
            }
            if (!str) {
              // <span class="fs-14">本次答题人数：' + allAnswerNum + '人</span><br>
              str = '<span class="fs-16">' + seriesObj.axisValue + '</span> <span class="fs-12">' + t.label + '</span><br/>'
            }
            const iconHtml = '<span class="echart-tooltip-icon" style="background: ' + seriesObj.color + ';"></span>'

            // str += '<div class="echart-tooltip-line">' + iconHtml + ' ' + seriesObj.seriesName + ' ' + seriesObj.value + '人<i class="fs-16 pd-l10 el-icon-success" /></div>'
            if (rightA && seriesObj.seriesName === rightA) {
              str += '<div class="echart-tooltip-line">' + iconHtml + ' ' + seriesObj.seriesName + ' ' + seriesObj.value + '人<i class="fs-16 pd-l10 el-icon-success" ></i></div>'
              // debugger
            } else {
              str += '<div class="echart-tooltip-line">' + iconHtml + ' ' + seriesObj.seriesName + ' ' + seriesObj.value + '人</div>'
              // debugger
            }
            // debugger
          })
          return str
        }
      },
      legend: {
        bottom: 0,
        data: ['答题人数', '答错人数'],
        textStyle: {
          // color: '#fff',
        }
      },
      xAxis: {
        data: xAxisData
      },
      yAxis: {
      },
      series: [
        // answerData,
        errorData,
        ...answerTypeArr
      ]
    }

    // console.log('option', option)

    // 使用刚指定的配置项和数据显示图表。
    lineChartDom.setOption(option)

    return { echartDom: lineChartDom }
  }
}

/**
 * option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] // 第1题，第2题。。。题目总数
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Direct',
      type: 'bar',
      stack: 'Ad',
      emphasis: {
        focus: 'series'
      },
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Email',
      type: 'bar',
      stack: 'Ad',
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'bar',
      stack: 'Ad',
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'bar',
      stack: 'Ad',
      emphasis: {
        focus: 'series'
      },
      data: [150, 232, 201, 154, 190, 330, 410]
    },
  ]
};
 */
